<template>
	<view class="content">
		<!-- 头部 -->
		<view class="header">
			<image src="../../static/images/logo.png"></image>
			<view class="searchInput">
				<i class="iconfont icon-sousuo"></i>
				<input type="text" placeholder="搜索商品" placeholder-class="placeholder" />
			</view>
			<button type="default">登录</button>
		</view>
		<!-- 导航栏， 带滑块 -->
		<scroll-view class="navScroll" scroll-x enable-flex>
			<view class="scrollItem" :class="{ active: navId === -1 }" @click="navId = -1">推荐</view>
			<view
				class="scrollItem"
				:class="{ active: navId === kingKongItem.L1Id }"
				@click="navId = kingKongItem.L1Id"
				v-for="(kingKongItem, index) in kingKongList"
				:key="kingKongItem.L1Id"
			>
				{{ kingKongItem.text }}
			</view>
		</scroll-view>
		<!-- 推荐 -->
		<scroll-view class="recommendScroll" scroll-y><Recommend></Recommend></scroll-view>
	</view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';

import Recommend from '../../component/Recommend/index.vue';

export default {
	name: 'Home',
	components: {
		Recommend
	},
	data() {
		return {
			navId: -1 // 导航栏切换的标识
		};
	},
	computed: {
		...mapState({
			initData: state => state.indexData.indexData
		}),
		...mapGetters(['kingKongList'])
	},
	methods: {
		...mapActions(['getIndexData'])
	},
	created() {
		this.getIndexData();
	}
};
</script>

<style lang="stylus">
.content
	.header
		display flex
		padding 10upx 0
		image
			width 140upx
			height 40upx
			margin 10upx 20upx
		.searchInput
			height 60upx
			background-color #eee
			position relative
			input
				height 60upx
				margin-left 50upx
			.iconfont
				font-size 30upx
				position absolute
				left 10upx
				top 25%
			.placeholder
				font-size 20upx
				text-align center
		button
			width 144upx
			height 60upx
			font-size 24upx
			line-height 60upx
			text-align center
			color #b4282d
			margin 0 20upx
	.navScroll
		display flex
		height 80upx
		white-space nowrap
		.scrollItem
			width 200upx
			height 100%
			line-height 80upx
			text-align center
			display inline-block
			padding 0 20upx
			margin 0 20upx
			font-size 30upx
			box-sizing border-box
			&.active
				border-bottom 1px solid red
	.recommendScroll
		margin-top 10rpx
		height calc(100vh - 170rpx)
</style>
